<template>
  <div class="base">
    <div class="left">
      <img @click="close" class="close" src="./img/close.png">
    </div>
    <div class="right">
      <div class="header"></div>

      <div class="box">
        <img class="tr" src="./img/tr.png">
        <img class="br" src="./img/br.png">
        <img class="brl" src="./img/brl.png">
        <component :is="com"></component>
      </div>
    </div>
  </div>
</template>

<script>
import App from '@/view/app.vue';

export default {
  name: 'Base',

  data() {
    return {
      com: 'test',
    };
  },

  methods: {
    close() {
      this.$action.clearClassInfo();
      this.$toast('退出成功!');
      // 先这么写，后续维护一个退出js销毁各种状态（如ws）
      setTimeout(() => {
        window.location.reload();
      }, 2000);
    },
  },

  components: {
    test: App,
  },
};
</script>

<style lang="postcss" scoped>
.base {
  display: flex;
  height: 100%;

  & .left {
    position: relative;
    width: 12%;
    background-color: #564BA7;

    & .close {
      position: absolute;
      top: 80%; left: 50%;
      transform: translateX(-50%);
      width: 0.68rem;
    }
  }

  & .right {
    position: relative;
    width: 88%;

    & .header {
      position: absolute;
      z-index: 1;
      height: 1.48rem;
      width: 100%;
      top: 0; left: 0;
      box-shadow: 0 0 20px 6px rgba(0, 0, 0, .2);
      background-color: rgba(255, 255, 255, .8);
    }

    & .box {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding-top: 1.48rem;

      & img {
        position: absolute;
      }
      & .tr {
        width: 5.31rem;
        top: 0; right: 0;
      }
      & .brl {
        width: 7.96rem;
        bottom: 0; right: 0;
      }
      & .br {
        width: 1.99rem;
        bottom: 0; right: 0;
      }
    }
  }
}
</style>
